<template>
  <div class="footMusic">
    <div class="left" @click="showPop">
      <img
        :src="playlist[playListIndex].al.picUrl"
        alt=""
        :class="{ active: !isShow }"
      />
      <div class="leftSon">
        <div class="songsName">{{ playlist[playListIndex].al.name }}</div>
        <span>横划切换上下首歌</span>
      </div>
    </div>
    <div class="right">
      <svg class="icon" aria-hidden="true" @click="play" v-if="isShow">
        <use xlink:href="#icon-bofang-copy"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-zantingtingzhi"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-menu-right"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playlist[playListIndex].id}.mp3`"
    ></audio>
  </div>
  <van-popup
    v-model:show="detailShow"
    position="bottom"
    :style="{ height: '100%', width: '100%' }"
    close-on-popstate="true"
  >
    <lyric :lyric="playlist[playListIndex]" :play="play" :isShow="isShow" />
  </van-popup>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import lyric from "./lyric.vue";
export default {
  components: { lyric },
  computed: {
    ...mapState(["playlist", "playListIndex", "isShow", "detailShow"]),
  },
  mounted() {
    this.$store.dispatch("getMusicLyric", this.playlist[this.playListIndex].id);
  },
  updated() {
    this.$store.dispatch("getMusicLyric", this.playlist[this.playListIndex].id);
  },
  methods: {
    play() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.CHANHRISSHOE(false);
      } else {
        this.$refs.audio.pause();
        this.CHANHRISSHOE(true);
      }
    },
    showPop() {
      this.UODATEDETAIL();
    },
    ...mapMutations(["CHANHRISSHOE", "UODATEDETAIL"]),
  },
  watch: {
    playlist() {
      this.$refs.audio.autoplay = true;
      if (this.$refs.audio.paused) {
        this.CHANHRISSHOE(false);
      }
    },
  },
};
</script>

<style scoped lang="less">
.footMusic {
  width: 100%;
  height: 48px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  .icon {
    width: 22px;
    height: 22px;
    margin-left: 12px;
  }
  .left {
    display: flex;
    margin-left: 12px;
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: pink;
    }
    .active {
      animation: rotates 2s linear infinite;
    }
    .leftSon {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      justify-content: center;
      margin-left: 4px;
      width: 200px;

      .songsName {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        font-size: 12px;
        margin-top: 4px;
        color: gray;
      }
    }
  }
  .right {
    margin-right: 12px;
  }
}
@keyframes rotates {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
